<template>
  <div class="login">
    <div class="login_wrapper">
      <div class="login_img">
        <div class="login_icon"></div>
        <div class="loginTitle">后台管理系统</div>
      </div>
      <div class="login_content">
        <div class="login_middle">
          <div class="login_select">
            <div class="actived">账号密码登录</div>
          </div>
          <el-form
            v-loading="loading"
            element-loading-text="登录中..."
            :model="loginForm"
            ref="formRef"
            :rules="rules"
            class="login-form"
          >
            <el-form-item prop="username" class="item">
              <el-input
                v-model="loginForm.username"
                class="login_input"
                placeholder="请输入用户名"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-form-item prop="password" class="item">
              <el-input
                v-model="loginForm.password"
                ref="password"
                placeholder="请输入密码"
                class="login_input"
                autocomplete="off"
                :type="isPassword === true ? 'password' : 'text'"
                @keyup.enter.native="handleLogin"
              />
              <span
                class="password_icon"
                :class="isPassword === true ? 'eye_close' : 'eye_open'"
                @click="handleView"
              ></span>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="login_button"
                @click.native.prevent="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import { login, getLoginUser } from "@/api/login/login";
export default {
  data() {
    return {
      loading: false,
      loginForm: {
        username: "15898759875",
        password: "123@abc",
      },
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
      },
      isPassword: true,
    };
  },
  methods: {
    handleView() {
      this.isPassword = !this.isPassword;
    },
    handleLogin() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          const redirect = this.$route.query.redirect;
          login(this.loginForm).then((token) => {
            getLoginUser().then((userInfo) => {
              this.setToken(token.access_token);
              this.setUserInfo(userInfo);
              this.loading = false;
              this.$router.push(redirect || "/");
            });
          });
        }
      });
    },
    ...mapActions("user", ["setToken", "setUserInfo"]),
  },
};
</script>
<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .bg-image("./images/bgimg");
  background-size: cover;
  background-position: inherit;
  .login_wrapper {
    width: 1200px;
    display: flex;
    .login_img {
      width: 600px;
      height: 600px;
      .bg-image("./images/login-img");
      background-size: cover;
      border-radius: 0 0 0 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      .login_icon {
        width: 68px;
        height: 71px;
        margin-right: 30px;
        .bg-image("./images/login-logo");
        background-size: cover;
      }
      .loginTitle {
        text-align: left;
        color: #fff;
        font-size: 26px;
        line-height: 45px;
        font-weight: normal;
      }
    }
    .login_content {
      width: 600px;
      height: 600px;
      border: 1px solid #fff;
      padding: 80px;
      background: #fff;
      border-radius: 0 100px 0 0;
      .login_middle {
        width: 480px;
        height: auto;
        .login_select {
          display: flex;
          margin-top: 50px;
          .actived {
            color: #2c5084;
            margin-right: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid #2c5084;
            cursor: pointer;
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
          }
          .defalut {
            color: #666666;
            margin-right: 30px;
            cursor: pointer;
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
          }
        }
        .login-form {
          border-radius: 6px;
          background: #ffffff;
          width: 480px;
          margin-top: 54px;
          /deep/ .el-input {
            .el-input__inner {
              border: none !important;
              background: #f6f6f6 !important;
              height: 50px;
              line-height: 50px;
            }
          }
          .password_icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            z-index: 2020;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
          }
          .eye_open {
            .bg-image("./images/eye-open");
            background-size: cover;
          }
          .eye_close {
            .bg-image("./images/eye-close");
            background-size: cover;
          }
        }
        .login_button {
          width: 100%;
          height: 50px;
          background: #2c5084;
          border-radius: 6px;
        }
      }
    }
  }
}
</style>
